<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>01_复习</title>
    </head>
    <body>
        <ul>
            <li>我是列表项1</li>
            <li>我是列表项2</li>
            <li>我是列表项3</li>
            <li>我是列表项4</li>
            <li>我是列表项5</li>
            <li>我是列表项6</li>
        </ul>

        <script>
            // var li_list = document.querySelectorAll('li');
            // for(var i = 0; i < li_list.length; i++){
            //     li_list[i].onclick = function(){
            //         for(var j = 0; j < li_list.length; j++){
            //             li_list[j].style.color = 'black';
            //         }
            //         this.style.color = 'tomato';
            //     }
            // }

            // ---------------------
            var li_list = document.querySelectorAll('li');

            for(var i = 0; i < li_list.length; i++){
                
                li_list[i].index = i;

                li_list[i].onclick = function(){
                    for(var j = 0; j < li_list.length; j++){
                        li_list[j].style.color = 'black';
                    }

                    li_list[this.index].style.color = 'red';
                }
            }
        </script>
    </body>
</html>